<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>商户信息</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_967424_aurj9b7zn5n.css" />
		<style>
			ul {
				padding: 0;
				list-style: none;
			}
			
			.top {
				height: 180px;
				overflow: hidden;
			}
			
			.top img {
				width: 100%;
				height: 180px;
			}
			
			.bar {
				padding: 5px 5% 2px;
				background: white;
				position: relative;
			}
			
			.bar h4 {
				padding-top: 10px;
				margin: 0;
			}
			
			.mui-control-content {
				background-color: white;
				/*min-height: 500px;*/
			}
			
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			
			.con {
				background: white;
				margin-top: 10px;
				padding: 0 5%;
			}
			
			.xq {
				padding-top: 10px;
			}
			
			.xq p {
				text-indent: 2em;
			}
			
			.biaoti img {
				width: 20px!important;
				height: 20px;
			}
			
			.pllist {
				display: flex;
				flex-flow: column;
				justify-content: center;
				align-items: baseline;
			}
			
			.biaoti {
				display: flex;
				width: 100%;
			}
			
			.biaoti img {
				margin-right: 10px;
			}
			
			.biaoti h5 {
				width: 90%;
			}
			
			.biaoti .iconfont {
				display: block;
				float: right;
			}
			
			.pl {
				padding: 0 20px;
			}
			
			#scroll3 ul {
				display: flex;
				flex-flow: row wrap;
				justify-content: space-between;
			}
			
			.img_list {
				display: flex;
				float: left;
				width: 50%;
				overflow: hidden;
				flex-flow: column;
				align-items: center;
			}
			
			.img_list img {
				width: 120px!important;
				height: 80px;
			}
			
			.img_list p {
				text-align: center;
			}
			
			.tell {
				width: 100%;
				position: fixed;
				bottom: 0px;
				z-index: 99;
				display: flex;
			}
			
			.tell>div {
				display: flex;
				flex: 1;
				flex-flow: column;
				justify-content: center;
				height: 50px;
				padding: 0 10px;
				background: #F2F2F2;
			}
			
			#tell_text {
				margin: 0;
				height: 30px!important;
			}
			
			.tell button {
				flex: 0 0 50px;
				height: 50px;
				padding: 0;
				margin: 0;
				border-radius: 0;
				font-size: 15px;
				padding: 0 10px;
			}
			
			.box {
				position: relative;
				line-height: 30px;
				padding: 10px 5px;
			}
			
			.box:nth-of-type(1) {
				margin-top: 34px;
			}
			
			.box>h4:before {
				content: "";
				width: 5px;
				height: 20px;
				display: block;
				background: #007aff;
				position: absolute;
				top: 15px;
			}
			
			.box h4 {
				text-indent: 10px;
				/*border-bottom: 1px solid #d8d8d8;*/
				padding-bottom: 13px;
			}
			
			.box_con {
				display: flex;
				flex-flow: column;
				padding-left: 15px;
			}
			
			.blu {
				color: #82abea;
				padding: 0 10px;
			}
			
			.box_con p {
				text-indent: 15px;
				line-height: 20px;
				padding-left: 70px;
				margin-top: -26px;
			}
			
			.bar i {
				position: absolute;
				right: 20px;
				top: 15px;
				font-size: 40px;
			}
			
			.bar i:active {
				color: #007aff;
			}
			
			.lianghua img {
				width: 20px!important;
				height: 20px;
			}
			
			.lianghua .red {
				color: red;
			}
			#xiangqing{
				text-indent: 2em;
			}
		</style>
		<link href="css/map.css" rel="stylesheet" type="text/css" />
		<script src="js/map/locationManager.js" type="text/javascript"></script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商户信息</h1>
		</header>
		<div id="app" class="mui-content">
			<div class="top">
				<img src="images/xq.png" />
			</div>
			<div class="bar">
				<h4 class="mui-ellipsis" id="comName"></h4>
				<p class="mui-ellipsis" id="address"></p>
				<i id="ditu" class="mui-icon mui-icon-map"></i>
			</div>
			<div class="con">
				<div id="slider" class="mui-slider">
					<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<a class="mui-control-item" href="#item1mobile">
							基本详情
						</a>
						<a class="mui-control-item" href="#item2mobile">
							评论(<span id="commentcount"></span>)
						</a>
						<a class="mui-control-item" href="#item3mobile">
							公示信息
						</a>
						<a class="mui-control-item" href="#item4mobile">
							风采展示
						</a>
					</div>
					<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>
					<div class="mui-slider-group">
						<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
							<div id="scroll1" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<div id="xiangqing">

									</div>

									<!--<ul class="mui-table-view xq">
										<p v-html="" id="comDetails">

										</p>

									</ul>-->
								</div>
							</div>
						</div>
						<div id="item2mobile" class="mui-slider-item mui-control-content">
							<div id="scroll2" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<ul class="comment">

									</ul>
									<!--<div class="mui-loading">
										<div class="mui-spinner">
										</div>
									</div>-->
								</div>
							</div>

						</div>
						<div id="item3mobile" class="mui-slider-item mui-control-content">
							<div id="scroll3" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<div class="box">
										<h4>量化分级结果</h4>
										<div class="box_con lianghua">
											<div><span>量化日期</span><span class="blu">{{arr.gradeDate}}</span></div>
											<h4 v-show="pingji==='0'"><span class="red">A级</span>情况优秀 <img src="pic/face1.png"/></h4>
											<h4 v-show="pingji==='1'"><span class="red">B级</span>情况良好 <img src="pic/face2.png"/></h4>
											<h4 v-show="pingji==='2'"><span class="red">C级</span>情况一般 <img src="pic/face3.png"/></h4>
											<h4 v-show="pingji==='3'">不予评定等级 </h4>
										</div>
									</div>
									<div class="box">
										<h4>许可信息</h4>
										<div class="box_con">
											<div><span>许可证号</span><span class="blu">{{arr.permitNumber}}</span></div>
											<span>许可有效期: <br /> 自<span class="blu">{{arr.permitStart}}</span>至<span class="blu">{{arr.permitEnd}}</span></span>
										</div>
									</div>

									<div class="box">
										<h4>监督信息</h4>
										<div class="box_con">
											<div><span>监督日期</span><span class="blu">{{arr.superviseDate}}</span></div>
											<span>监督结果</span>
											<p class="blu">{{arr.superviseResult}}</p>
										</div>
									</div>

									<div class="box">
										<h4>处罚信息</h4>
										<div class="box_con">
											<div><span>处罚日期</span><span class="blu">{{arr.punishDate}}</span></div>
											<span>处罚结果</span>
											<p class="blu">{{arr.punishResult}}</p>
										</div>
									</div>
									<!--<div class="mui-loading">
										<div class="mui-spinner">
										</div>
									</div>-->
								</div>
							</div>
						</div>
						<div id="item4mobile" class="mui-slider-item mui-control-content">
							<div id="scroll4" class="mui-scroll-wrapper">
								<div class="mui-scroll">
									<ul>
										<li class="img_list" v-for="val of 20">
											<img src="images/pic1.png" />
											<p>公园大门实景</p>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="tell">
				<div class="">
					<input type="text" id="tell_text" value="" />
				</div>
				<button id="fs_btn" type="button" class="mui-btn mui-btn-blue mui-btn-block">发表评论</button>
			</div>
		</div>
	</body>

</html>

<script src="js/mui.min.js "></script>
<script src="js/vue.js"></script>
<script src="js/jquery.js"></script>
<script>
	mui.plusReady(function() {
		plus.webview.currentWebview().setStyle({
			scrollIndicator: 'none'
		});
	});
	var style = localStorage.getItem('KEY');
	var id = localStorage.getItem('comId');
	var h = window.screen.height - 400;
	mui('#slider .mui-slider-group')[0].style.height = h + 'px'
	var app = new Vue({
		el: "#app",
		data: {
			arr: [{
				permitNumber: "",
				permitStart: "",
				superviseDate: "",
				superviseResult: "",
			}],
			pingji: '',
			xiangqing: '',
		}
	})
	app.permitNumber = "";
	mui.init({
		swipeBack: false
	});
	(function($) {
		$('.mui-scroll-wrapper').scroll({
			indicators: false //是否显示滚动条
		});
	})(mui);
	shuanxin();
	mui(".bar").on('tap', 'i', function() {
		tiao('ditu');
	})
	mui('body').on('tap', '#fs_btn', function() {
		//		var token=[{"id":"0000000064a73b8b0164a73c12500000","comName":"111","typeId":"4028b88167abe7520167abebc0bb0001","comGridX":"39.916295","comGridY":"116.410344","hasPermit":"0","permitNumber":"111","permitStart":"2018-12-19","permitEnd":"2018-12-19","isPersonal":"0","registerAddress":"11","comAddress":"11","postCode":"1","comPerson":"11","cardType":"1","comIdcard":"11","age":"1","comTelphone":"1","sex":"0","nation":"11","duties":"111","email":"11","comContact":"11","comCreditcode":"11","organizationCode":"11","economicTypeCode":"1","locationArea":"广西省 南宁市 兴宁区","remark":"111"}]

		if(TOKEN() == null || TOKEN() == "") {
			var btnArray = ['否', '是'];
			mui.confirm('登录后才能评论，是否登录？', '南宁', btnArray, function(e) {
				if(e.index == 1) {
					tiao('yonghudenglu');
				} else {}
			})
		} else {
			var genPhone = $.trim($("#tell_text").val());
			if(genPhone == "") {
				mui.toast('内容不能为空');
				return;
			}
			try {
				var token = JSON.parse(TOKEN()).id;
			} catch(e) {
				alert(TOKEN());
				return;
			}
			//提交评论
			mui.ajax(URL + 'meGeneralUser!sendComment', {
				data: {
					id: token,
					comId: id,
					commentContent: mui("#tell_text")[0].value,
				},
				dataType: 'json', //服务器返回json格式数据
				type: 'post', //HTTP请求类型
				timeout: 10000, //超时时间设置为10秒；
				success: function(data) {
					mui.toast(data.msg);
					if(data.success) {
						$("#tell_text").val("")
						shuanxin();
					}
				},
				error: function(xhr, type, errorThrown) {
					console.log(type);

				}
			});

		}

	})
	//公示信息接口
	mui.ajax(URL + 'meCompanyPublicInfo!findPicByComId?id=' + id, {
		dataType: 'json', //服务器返回json格式数据
		type: 'post', //HTTP请求类型
		timeout: 10000, //超时时间设置为10秒；
		success: function(data) {
			console.log(JSON.stringify(data));
			try {
				//				if(data.data) {
				app.arr = data.data[0];
				app.pingji = data.data[0].gradeResult;
				//				}
			} catch(e) {
				//TODO handle the exception
			}

		},
		error: function(xhr, type, errorThrown) {
			console.log(type);

		}
	});

	function shuanxin() {
		//公司地址 名字接口
		mui.ajax(URL + 'meCompanyUser!findComById?id=' + id, {
			dataType: 'json', //服务器返回json格式数据
			type: 'post', //HTTP请求类型
			//timeout:10000,//超时时间设置为10秒；
			success: function(data) {
				console.log(JSON.stringify(data));
				try {
					mui(".comment")[0].innerHTML = '';
					var comp = data.data[0].comp[0];
					var comment = data.data[0].comment;
					$("#comName").text(comp.comName);
					cun('danweiming', comp.comName);
					cun('dizhi', comp.comAddress);
					$("#address").text(comp.comAddress);
					
					$("#xiangqing").text(comp.remark);
					
					remark
					$("#comDetails").text(comp.comDetails);
					$("#commentcount").text(comment.length);
					if(!comment.genPhone) {
						shoujihao = "匿名            ";
					}
				} catch(e) {
					//TODO handle the exception
				}

				for(var i = 0; i < comment.length; i++) {
					$(".comment").append('<li class="pllist" >' +
						'							<div class="biaoti">' +
						'								<img src="images/user_icon.png" />' +
						'								<h5>' + shoujihao.substring(0, 3) + "****" + shoujihao.substring(7, 11) + '</h5>' +
						//						'								<i class="iconfont icon-weibiaoti--2"></i>' +
						'							</div>' +
						'							<div class="pl" >' +
						'								<p id="commentContent">' + comment[i].commentContent + '</p>' +
						'							</div>' +
						'						</li>'
					)
				}
			},
			error: function(xhr, type, errorThrown) {
				console.log(type);

			}
		});
	}
</script>